<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>


    <div id="app1">

        <!--
            修饰符
            当事件发生的时候,如何进行处理

            .stop
            .prevent
            .capture
            .self
            .once

         -->

        <!-- 阻止单击事件冒泡 -->
        <a @click.stop="handle"></a>


        <!-- 提交事件不再重载页面 -->
        <form @submit.prevent="handle"></form>


        <!-- 修饰符可以串联 -->
        <a @click.stop.prevent="handle"></a>

        <!-- 只有修饰符 -->
        <form @submit.prevent></form>


        <!-- 添加事件侦听器时使用事件捕获模式, 即内部元素触发的事件先在此处处理，然后才交由内部元素自身进行处理 -->
        <div @click.capture="handle"></div>


        <!-- 只有当事件在该元素本身(而不是子元素)触发时触发回调 -->
        <div @click.self="handle" ></div>


        <!-- 只触发一次,组件同样适用 -->
        <div @click.once="handle"></div>


        <!--
            按键修饰符
            在表单元素上监听键盘事件时, 可以使用按键修饰符,比如按下具体某个键才调用方法
         -->

        <!-- 只有在 keyCode 是 13 时调用 vm.submit()  -->
        <input @keyup.13="submit">


        <!-- 还可以自己配置具体按键
            Vue.config.keyCodes.f1 = 112;
            全局定义后,就可以使用 @keyup.f1
        -->

        <!--
            除了具体的某个 keyCode 外, Vue 还提供了一些快捷名称,以下是全部的别名:
            .enter
            .tab
            .delete     捕获 "删除" 和 "退格" 键
            .esc
            .space
            .up
            .down
            .left
            .right


            这些按键修饰符也可以组合使用,或者和鼠标一起配合使用:
            .ctrl
            .alt
            .shift
            .meta       Mac 下是 Command 键, Windows 下是窗口键
        -->

        <!-- Shift + S -->
        <input @keyup.shift.83="handleSave">

        <!-- Ctrl + Click -->
        <div @click.ctrl="doSomething">Do something</div>


    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                counter: 0
            }
        });


    </script>

</body>
</html>